<template>
	<view class="content">
		<uni-popup ref="preview">
			<image class="pre-image" :src="preUrl" mode="aspectFit"></image>
		</uni-popup>
		<view style="height: 50px;"></view>
		<view v-show="state==0" class="upload-con" @click="selectFile">
			<image mode="widthFix" src="/static/img/add.png"></image>
			<text>点击添加文件</text>
		</view>
		<template v-for="(item,i) in selectFiles">
			<view v-show="state>0" class="file-ready">
				<image class="img-prew" :src="item.url" @click="preImage(item.url)" mode="aspectFit"></image>
				<view class="ready-r">
					<text>{{item.file.name}}</text>
					<progress :percent="percent" stroke-width="6" show-info></progress>
				</view>
				<image class="img-res" v-show="state==2||state==3" :src="state==2?'/static/img/ok.png':'/static/img/err.png'"></image>
			</view>
		</template>
		<view style="height: 100rpx;"></view>
		<view class="btn_submit" @click="uploadFile">{{btnTxt}}</view>
		<view style="height: 36rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				state: 0,
				selectFiles: [],
				percent: 0,
				preUrl: '',
				btnTxt: '上传'
			}
		},
		onLoad() {

		},
		methods: {
			preImage(e) {
				this.preUrl = e;
				this.$refs.preview.open();
			},
			selectFile() {
				uni.chooseFile({
					type: 'image',
					success: res=> {
						const filePaths = res.tempFiles;
						let desFiles = [];
						filePaths.forEach(file=> {
							desFiles.push({url: file.path, file: file})
						});
						this.selectFiles = desFiles;
						this.state = 1;
					}
				});
			},
			uploadFile() {
				if (this.state > 1) {
					this.state = 0;
					this.btnTxt = "上传"
					return;
				}
				if (this.state == 1) {
					var task = uni.uploadFile({
						url: '/api/uploadFile',
						files: this.selectFiles,
						success: res => {
							this.state = res.statusCode == 200 ? 2 : 3;
						},
						complete: () => {
							this.btnTxt = "继续上传"
						}
					});
					task.onProgressUpdate(res=> {
						this.percent = res.progress;
					})
				}
			}
		}
	}
</script>

<style>
	.pre-image {
		width: 100vw;
		height: 33vh;
	}
	.upload-con {
		width: 85%;
		height: 300rpx;
		background: #fcfcfc;
		border: 2rpx dashed #ddd;
		border-radius: 6rpx;
		margin: 0 auto;
		display: flex;
		row-gap: 16rpx;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.upload-con image {
		width: 100rpx;
		height: 100rpx;
	}
	.upload-con text {
		color: #ccc;
	}
	
	.file-ready {
		display: flex;
		width: 85%;
		margin: 26rpx auto;
		align-items: center;
	}
	.img-prew {
		width: 130rpx;
		height: 100rpx;
		flex-shrink: 0;
	}
	.img-res {
		width: 86rpx;
		height: 86rpx;
		margin-left: 10rpx;
	}
	.ready-r {
		display: flex;
		flex-direction: column;
		row-gap: 8rpx;
		justify-content: center;
		margin-left: 20rpx;
		flex: 1;
	}
	
	.btn_submit {
	  height: 69rpx;
	  line-height: 69rpx;
	  border-radius: 40rpx;
	  background: linear-gradient(to right, #3b8bf7, #6f57eb);
	  color: white;
	  width: 300rpx;
	  border: none;
	  outline: none;
	  margin: 0 auto;
	  text-align: center;
	}
	.btn_submit:active {
		background: linear-gradient(to right, #3278d3, #5a48c3);
	}
	
	/deep/ .uni-progress-bar {
	     border-radius: 15rpx;  
	 }  
	 /deep/ .uni-progress-inner-bar {  
	     border-radius: 15rpx;  
	 }
</style>